<template>
	<view>
		<view class="table-title">
			<view class="head-title">柜列表 <span class="isAllow" v-if="tableData.length>0">（选中设备即为当前页设备）</span></view>
			<view v-if="tableData.length>0" class="isAllow tip-text">注：设备编码为红色文字的代表当前设备不可用</view>
		</view>
		<view class="table" v-if="tableData.length>0">
			<view class="tr">
				<view class="th">
					<checkbox value="0" style="transform:scale(.85)" :checked="isCheckedAll" @click="checkAll" />
				</view>
				<view class="th width-text"></view>
				<view class="th"></view>
				<view class="th width-text">操作</view>
			</view>
			<view class="tr" v-for="(item,index) in tableData" :key="index">
				<view class="td indexs">
					<checkbox :value="index+1" style="transform:scale(.85)" :checked="item.checked"
						@click="checkboxClick(index)" />
				</view>
				<view class="td width-text">
					<view>序号</view>
					<view class="bordert">编码</view>
					<view class="bordert">ID</view>
					<view class="bordert" v-if="item.resultStatus || item.resultStatus==0">结果</view>
					<view class="bordert" v-if="item.resultReason">描述</view>
					<view class="bordert indexs">版本</view>
				</view>
				<view class="td">
					<view>{{index+1}}</view>
					<view :class="[{'isAllow':!item.isAllowOperate},'bordert']">{{item.code?item.code:""}}</view>
					<view class="bordert">{{item.id}}</view>
					<view class="versions bordert" v-if="item.resultStatus || item.resultStatus==0">
						{{resultData[item.resultStatus]}}
					</view>
					<view class="versions bordert" v-if="item.resultReason">{{item.resultReason}}</view>
					<view class="versions bordert">{{item.equipSoftwareVersions|formatVersion}}</view>
				</view>
				<view class="td width-text indexs">
					<view class="iconfont icon-copy" v-if="item.code" @click="isCopy(item.code)"></view>
					<view>
						<uni-icons type="upload" size="24" color="#999999"
							v-if="permission('applet:batchupgrade:resend')&&(item.resultStatus==2 || item.resultStatus==3)"
							@click="resendParam(index)">
						</uni-icons>
					</view>
					<uni-icons v-if="item.code && item.isAllowOperate" type="search" size="26" color="#999999"
						@click="isSearchVersion(index,item.code)"></uni-icons>
				</view>
			</view>
		</view>
		<uni-pagination class="pagination" v-if="tableData.length>0" @change="changePage()" pageSize="30"
			:current="page" :total="total" :show-icon="true" prev-text="前一页" next-text="后一页" />

		<view class="nodata" v-if="tableData.length == 0">
			<image class="empty_img" src="/static/images/empty.png" mode="widthFix"></image>
			<view>暂无数据</view>
		</view>
	</view>
</template>

<script>
	import {
		doCopy,
	} from "@/common/index.js";
	import {
		permission
	} from "@/common/permission.js";
	import {
		mapState,
	} from 'vuex';
	export default {
		props: {
			tableData: {
				type: Array,
				default: () => []
			},
			page: {
				typeof: Number,
				default: 1,
			},
			total: {
				typeof: Number,
				default: 0,
			},
		},
		data() {
			return {
				isCheckedAll: false, //全选
				permission: permission,
				resultData: {},
			}
		},
		computed: {
			...mapState(['enums'])
		},
		filters: {
			formatVersion(arr) {
				if (arr && arr.length > 0) {
					let arrayTwo = Object.values(
						arr.reduce((res, item) => {
							res[item.partType] ?
								res[item.partType].push(item) :
								(res[item.partType] = [item]);
							return res;
						}, {})
					);
					let jsons = "";
					arrayTwo.map((item, index) => {
						jsons += item[0].partTypeName;
						item.filter((qq, inx) => {
							jsons += qq.version;
							if (inx < item.length - 1) jsons += " | ";
						});
						if (index < arrayTwo.length - 1) jsons += "；";
					});
					return jsons;
				} else {
					return "";
				}
			}
		},
		watch: {
			tableData: {
				handler(val) {
					let checked = val.filter(item => item.checked);
					this.isCheckedAll = checked.length == val.length ? true : false;
				},
				deep: true,
				immediate: true,
			},
			enums: {
				async handler(val) {
					val.EQUIP_OPERATE_RESULT_STATUS.forEach(item => {
						this.resultData[item.code] = item.label;
					});
				},
				immediate: true,
			},
		},
		methods: {
			checkboxClick(e) {
				let check = !this.tableData[e].checked;
				this.$set(this.tableData[e], 'checked', check);
				let checkList = this.tableData.filter(item => item.checked);
				if (check && checkList.length == this.tableData.length) {
					this.isCheckedAll = true;
				} else {
					this.isCheckedAll = false;
				}
				this.$emit('checkedChange', this.tableData);
			},
			checkAll() {
				this.isCheckedAll = !this.isCheckedAll;
				if (this.isCheckedAll) {
					this.tableData.forEach(item => item.checked = true);
				} else {
					this.tableData.forEach(item => item.checked = false);
				}
				this.$emit('checkedChange', this.tableData);
			},
			resendParam(e) {
				this.tableData.forEach(item => item.checked = false);
				this.checkboxClick(e);
				this.$emit('resendParam', 1);
			},
			isSearchVersion(index, code) {
				this.tableData.forEach(item => item.checked = false);
				this.checkboxClick(index);
				this.$emit('isSearchVersion', code);
			},
			// 分页
			changePage(e) {
				this.$emit('changePage', e.current);
			},
			// 复制
			isCopy(item) {
				doCopy(item);
			},

		},
	}
</script>

<style lang="scss" scoped>
	@import "@/static/iconfont.css";

	.table {
		width: 100%;
		border-radius: 8rpx;
		display: table;
		border: 2rpx solid #dfdfdf;
		border-collapse: collapse;
		color: #333333;
		font-size: 28rpx;
		margin-bottom: 120rpx;
	}

	.th {
		text-align: center;
		padding: 10rpx 0;
		font-weight: bolder;
		display: table-cell;
		border: 2rpx solid #dfdfdf
	}

	.td {
		text-align: center;
		background: #FFFFFF;
		padding: 10rpx 0;
		display: table-cell;
		border: 2rpx solid #dfdfdf;

		view {
			min-height: 50rpx;
		}
	}

	.tr {
		display: table-row;
		border: 2rpx solid #dfdfdf;
	}

	.indexs {
		vertical-align: middle;
	}

	.width-text {
		width: 76rpx;
	}

	.versions {
		padding: 0 10rpx;
		text-align: left;
	}

	.bordert {
		border-top: 2rpx solid #dfdfdf;
		padding-top: 10rpx;
		margin-top: 10rpx;
	}

	.nodata {
		margin-top: 20%;
	}

	.isAllow {
		color: red;
	}

	.tip-text {
		font-size: 28rpx;
		margin: 10rpx 0;
	}

	.pagination {
		width: 100%;
		position: fixed;
		bottom: 20rpx;
		left: 0;
		background: #FFFFFF;
		padding: 20rpx 0;
	}

	.operate-icon {
		position: relative;
		top: 90rpx;
	}

	.icon-copy {
		font-size: 36rpx;
		color: #666666;
	}
</style>